@{
    ViewBag.Title = "Search";
}
<h3>
    Search
    <small>Search and filter results</small>
</h3>
<div class="row">
    <div class="col-lg-9">
        <div class="form-group mb-xl">
            <input type="text" placeholder="Search products, people, apps, etc." class="form-control mb" />
            <div class="clearfix">
                <button type="button" class="pull-left btn btn-default">Search</button>
                <div class="pull-right">
                    <label class="checkbox-inline c-checkbox">
                        <input id="inlineCheckbox10" type="checkbox" value="option1" />
                        <span class="fa fa-check"></span>Products
                    </label>
                    <label class="checkbox-inline c-checkbox">
                        <input id="inlineCheckbox20" type="checkbox" value="option2" />
                        <span class="fa fa-check"></span>People
                    </label>
                    <label class="checkbox-inline c-checkbox">
                        <input id="inlineCheckbox30" type="checkbox" value="option3" />
                        <span class="fa fa-check"></span>Apps
                    </label>
                </div>
            </div>
        </div>
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <a href="#" data-tool="panel-refresh" data-toggle="tooltip" title="Refresh Panel" class="pull-right">
                    <em class="fa fa-refresh"></em>
                </a>Search Results
            </div>
            <!-- START table-responsive-->
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th data-check-all="">
                                <div data-toggle="tooltip" data-title="Check All" class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a href="#" class="pull-left">
                                        <img src="~/Content/Images/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 1</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a href="#" class="pull-left">
                                        <img src="~/Content/Images/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 2</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a href="#" class="pull-left">
                                        <img src="~/Content/Images/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 3</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a href="#" class="pull-left">
                                        <img src="~/Content/Images/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 4</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a href="#" class="pull-left">
                                        <img src="~/Content/Images/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 5</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- END table-responsive-->
            <div class="panel-footer">
                <div class="row">
                    <div class="col-lg-2">
                        <button class="btn btn-sm btn-default">Clear</button>
                    </div>
                    <div class="col-lg-8"></div>
                    <div class="col-lg-2 text-right">
                        <ul class="pagination pagination-sm">
                            <li class="active">
                                <a href="#">1</a>
                            </li>
                            <li>
                                <a href="#">2</a>
                            </li>
                            <li>
                                <a href="#">3</a>
                            </li>
                            <li>
                                <a href="#">»</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel-->
    </div>
    <div class="col-lg-3">
        <h3 class="m0 pb-lg">Filters</h3>
        <div class="form-group mb-xl">
            <label class="control-label mb">by Text</label>
            <br />
            <select class="chosen-select input-md form-control">
                <optgroup label="NFC EAST">
                    <option>Dallas Cowboys</option>
                    <option>New York Giants</option>
                    <option>Philadelphia Eagles</option>
                    <option>Washington Redskins</option>
                </optgroup>
                <optgroup label="NFC NORTH">
                    <option>Chicago Bears</option>
                    <option>Detroit Lions</option>
                    <option>Green Bay Packers</option>
                    <option>Minnesota Vikings</option>
                </optgroup>
                <optgroup label="NFC SOUTH">
                    <option>Atlanta Falcons</option>
                    <option>Carolina Panthers</option>
                    <option>New Orleans Saints</option>
                    <option>Tampa Bay Buccaneers</option>
                </optgroup>
                <optgroup label="NFC WEST">
                    <option>Arizona Cardinals</option>
                    <option>St. Louis Rams</option>
                    <option>San Francisco 49ers</option>
                    <option>Seattle Seahawks</option>
                </optgroup>
                <optgroup label="AFC EAST">
                    <option>Buffalo Bills</option>
                    <option>Miami Dolphins</option>
                    <option>New England Patriots</option>
                    <option>New York Jets</option>
                </optgroup>
                <optgroup label="AFC NORTH">
                    <option>Baltimore Ravens</option>
                    <option>Cincinnati Bengals</option>
                    <option>Cleveland Browns</option>
                    <option>Pittsburgh Steelers</option>
                </optgroup>
                <optgroup label="AFC SOUTH">
                    <option>Houston Texans</option>
                    <option>Indianapolis Colts</option>
                    <option>Jacksonville Jaguars</option>
                    <option>Tennessee Titans</option>
                </optgroup>
                <optgroup label="AFC WEST">
                    <option>Denver Broncos</option>
                    <option>Kansas City Chiefs</option>
                    <option>Oakland Raiders</option>
                    <option>San Diego Chargers</option>
                </optgroup>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label mb">by Date</label>
            <br>
            <p id="datetimepicker" class="input-group date">
                <input type="text" class="form-control">
                <span class="input-group-addon">
                    <span class="fa fa-calendar"></span>
                </span>
            </p>
        </div>
        <div class="form-group mb-xl">
            <label class="control-label mb">by Range</label>
            <br />
            <input id="sl2" data-ui-slider="" type="text" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,750]" class="slider" />
        </div>
        <button class="btn btn-default btn-lg">Apply</button>
    </div>
</div>


@section Styles {
    @Styles.Render("~/bundles/sliderCtrlCss")
    @Styles.Render("~/bundles/chosenCss")
    @Styles.Render("~/bundles/datetimePickerCss")
}
@section Scripts {
    @Scripts.Render("~/bundles/sliderCtrl")
    @Scripts.Render("~/bundles/chosen")
    @Scripts.Render("~/bundles/demoSearch")
    @Scripts.Render("~/bundles/moment")
    @Scripts.Render("~/bundles/datetimePicker")
}
